<template>
  <div class="container">
    <form>
      <div class="form-group">
        <label>姓名</label>
        <input v-model="name" class="form-control" type="text" />
      </div>
      <div class="form-group">
        <label>颜值打分</label>
        <input v-model="score" class="form-control" type="text" />
      </div>
      <div class="form-group">
        <button @click="handleAdd" class="btn btn-primary" type="button">
          添加
        </button>
        <button class="btn btn-warning" type="reset">重置</button>
        <div class="pull-right">
          <button
            v-for="(item, index) in tabArr"
            :class="['btn', { 'btn-danger': index == scoreType }]"
            type="button"
            @click="handleTab(index)"
          >
            全部明星
          </button>
        </div>
      </div>
    </form>
    <table class="table table-bordered">
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>颜值</th>
        <th>操作</th>
      </tr>
      <tr v-if="starList.length == 0">
        <td colspan="4" class="text-center">没有任何数据~</td>
      </tr>
      <tr v-for="(item, index) in filterStarList" :key="index">
        <td>{{ index }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.score }}</td>
        <td>
          <button
            class="btn btn-danger btn-xs"
            type="button"
            name="button"
            @click="handleDel(index)"
          >
            删除
          </button>
        </td>
      </tr>
    </table>
    <div class="form-group text-right">
      <button
        class="btn btn-danger btn-sm"
        type="button"
        name="button"
        @click="handleDelAll"
      >
        删除全部
      </button>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";

// 逻辑1：新增明星
const name = ref("三丰");
const score = ref(100);
const starList = ref([
  { name: "三丰", score: 100 },
  { name: "三丰1", score: 80 },
  { name: "三丰2", score: 50 },
]);
const handleAdd = () => {
  starList.value.push({
    name: name.value,
    score: score.value,
  });
};

//逻辑2：菜单切换
const tabArr = ["全部明星", "及格明星", "不及格明星"];
const scoreType = ref(0);
const handleTab = (idx) => {
  scoreType.value = idx;
};
const filterStarList = computed(() => {
  if (scoreType.value == 0) {
    return starList.value; //全部
  }
  if (scoreType.value == 1) {
    let arr = starList.value.filter((item) => {
      return item.score >= 60; //此处返回true则数据被保留，返回false数据会被删掉
    });
    return arr; //及格
  }
  if (scoreType.value == 2) {
    let arr = starList.value.filter((item) => {
      return item.score < 60; //此处返回true则数据被保留，返回false数据会被删掉
    });
    return arr; //不及格
  }
});


//逻辑3：删除一条数据
const handleDel = (idx)=>{
  starList.value.splice(idx,1)
}

//逻辑4：删除全部
const handleDelAll = ()=>{
  starList.value = []
}
</script>

<style lang="scss" scoped>
@import "bootstrap/scss/bootstrap";
</style>
